<template>
	<div class="container">
		<Breadcrumb/>
		<a-card class="data-card ">
			<a-row>
				<a-col :flex="1">
					<a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
						<a-row :gutter="20">
							<a-col :span="5">
								<a-form-item field="userName" label="用户名">
									<a-input v-model="formModel.userName" placeholder="请输入用户名" allow-clear />
								</a-form-item>

							</a-col>
							<a-col :span="5">
								<a-form-item field="username" label="时间">
									<a-range-picker @change="onChangeTime" />
								</a-form-item>
							</a-col>
							<a-col :span="5">
								<a-space :size="18">
									<a-button type="primary" @click="onPageChange(1)">
										<template #icon>
											<icon-search />
										</template>
										搜索
									</a-button>
									<a-button @click="reset">
										<template #icon>
											<icon-refresh />
										</template>
										重置
									</a-button>
									<a-button type="primary" @click="openOper">
										操作日志
									</a-button>
								</a-space>
							</a-col>
						</a-row>
					</a-form>
				</a-col>
			</a-row>
			<a-divider style="margin-top: 0" />
			<a-table row-key="userId" :loading="loading" page-position='bottom' :pagination="pagination" :columns="columns" :data="renderData" :bordered="false" @page-change="onPageChange" @page-size-change="onPageSizeChange">
			</a-table>
		</a-card>
	</div>
</template>
<script lang="ts" setup>
	import { computed, ref, reactive, watch, nextTick } from 'vue';
	import { useRouter } from 'vue-router';
	import useLoading from '@/hooks/loading';
	import { loginLogs } from '@/api/logs.ts'

	const {
		loading,
		setLoading
	} = useLoading(true);

	const generateFormModel = () => {
		return {
			userName: '',
			startDate: '',
			endDate: '',
		};
	};

	const formModel = ref(generateFormModel());
	const renderData = ref([]);

	const onChangeTime = (startEnd, startEndOri) => {
		if(startEnd && startEnd.length == 2) {
			formModel.value.startDate = startEnd[0]
			formModel.value.endDate = startEnd[1]
		} else {
			formModel.value.startDate = ''
			formModel.value.endDate = ''
		}
	}

	const basePagination: Pagination = {
		current: 1,
		pageSize: 15,
		total: 0

	};
	const pagination = reactive({
		...basePagination,
		'hide-on-single-page': true,
		'show-total': true,
		'show-jumper': true,
		'show-page-size': true,
	});
	const columns = computed < TableColumnData[] > (() => [{
			title: '用户名',
			dataIndex: 'username',
		},
		{
			title: 'IP地址',
			dataIndex: 'ipAddress',
		},
		{
			title: '操作时间',
			dataIndex: 'loginTime',
		},
		{
			title: '操作描述',
			dataIndex: 'remark',
		},
	]);

	const fetchData = async() => {
		setLoading(true);
		try {
			const data = {
				pageNum: pagination.current,
				...pagination,
				...formModel.value,
			}
			loginLogs(data).then(res => {
				renderData.value = res.data.list;
				pagination.total = res.data.total;
				pagination.current = res.data.current;

			})
		} catch(err) {
			console.log(err)
		} finally {
			setLoading(false);
		}
	};

	const onPageChange = (current: number) => {
		pagination.current = current;
		fetchData();
	};
	const onPageSizeChange = (pageSize: number) => {
		pagination.pageSize = pageSize;
		fetchData();
	};

	const reset = () => {
		formModel.value = generateFormModel();
		fetchData()
	};
	fetchData();

	const router = useRouter();
	const openOper = () => {
		router.push({
			name: 'operlogs'
		});
	};
</script>